import { View, Text, Image } from '@tarojs/components'
import React from 'react'
import { useSelector } from 'react-redux'
import Taro from '@tarojs/taro'
import './index.scss'

const Profile = () => {
  const favorites = useSelector(state => state.food.favorites)
  const recentViews = useSelector(state => state.food.recentViews)

  const menuItems = [
    {
      icon: 'fa-heart',
      text: '我的收藏',
      count: favorites.length,
      path: '/pages/favorites/index'
    },
    {
      icon: 'fa-clock-rotate-left',
      text: '浏览历史',
      count: recentViews.length,
      path: '/pages/history/index'
    },
    {
      icon: 'fa-location-dot',
      text: '常用地址',
      count: 2,
      path: '/pages/addresses/index'
    }
  ]

  const settingsItems = [
    {
      icon: 'fa-bell',
      text: '消息通知',
      path: '/pages/notifications/index'
    },
    {
      icon: 'fa-gear',
      text: '偏好设置',
      path: '/pages/settings/index'
    },
    {
      icon: 'fa-circle-question',
      text: '帮助与反馈',
      path: '/pages/help/index'
    }
  ]

  const handleMenuClick = (path) => {
    Taro.navigateTo({ url: path })
  }

  return (
    <View className='profile'>
      {/* 用户信息 */}
      <View className='profile__user'>
        <Image
          className='profile__avatar'
          src='https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop'
        />
        <View className='profile__info'>
          <Text className='profile__name'>用户名</Text>
          <Text className='profile__id'>ID: 888888</Text>
        </View>
        <View className='profile__edit' onClick={() => handleMenuClick('/pages/settings/index')}>
          <Text className='fa-solid fa-pen' />
        </View>
      </View>

      {/* 数据统计 */}
      <View className='profile__stats'>
        <View className='profile__stat-item'>
          <Text className='profile__stat-num'>{favorites.length}</Text>
          <Text className='profile__stat-label'>收藏</Text>
        </View>
        <View className='profile__stat-item'>
          <Text className='profile__stat-num'>{recentViews.length}</Text>
          <Text className='profile__stat-label'>足迹</Text>
        </View>
        <View className='profile__stat-item'>
          <Text className='profile__stat-num'>12</Text>
          <Text className='profile__stat-label'>评价</Text>
        </View>
      </View>

      {/* 菜单列表 */}
      <View className='profile__section'>
        <View className='profile__section-title'>我的服务</View>
        <View className='profile__menu'>
          {menuItems.map((item, index) => (
            <View
              key={index}
              className='profile__menu-item'
              onClick={() => handleMenuClick(item.path)}
            >
              <View className='profile__menu-icon'>
                <Text className={`fa-solid ${item.icon}`} />
              </View>
              <Text className='profile__menu-text'>{item.text}</Text>
              {item.count > 0 && (
                <Text className='profile__menu-count'>{item.count}</Text>
              )}
              <Text className='fa-solid fa-chevron-right profile__menu-arrow' />
            </View>
          ))}
        </View>
      </View>

      {/* 设置列表 */}
      <View className='profile__section'>
        <View className='profile__section-title'>设置</View>
        <View className='profile__menu'>
          {settingsItems.map((item, index) => (
            <View
              key={index}
              className='profile__menu-item'
              onClick={() => handleMenuClick(item.path)}
            >
              <View className='profile__menu-icon'>
                <Text className={`fa-solid ${item.icon}`} />
              </View>
              <Text className='profile__menu-text'>{item.text}</Text>
              <Text className='fa-solid fa-chevron-right profile__menu-arrow' />
            </View>
          ))}
        </View>
      </View>

      {/* 版本信息 */}
      <View className='profile__footer'>
        <Text className='profile__version'>版本 1.0.0</Text>
      </View>
    </View>
  )
}

export default Profile 